<template>
  <div className="row">

    <!--        页头-->
    <div class="col-12 head1">
      <card>
        <div class="row" >
          <span class="deco"></span>
          <h2 class="clearMargin">面向对象程序设计（Java）</h2>

          <!--          <a href="#/detail-add" target="_blank" class="card-img-top" style="float: right">-->
          <el-button style="margin-left: 45rem;" type="primary" @click="show3 = !show3">点击切换课程</el-button>
          <!--          </a>-->

        </div>
      </card>
    </div>


    <div style="margin-top: 20px; position: relative;">
      <el-collapse-transition>
        <div v-show="show3" style="position: absolute; z-index: 2;">
          <div class="col-12">
            <CourseMenu/>
          </div>
        </div>
      </el-collapse-transition>
    </div>


    <div class="col-12" style="position: relative; z-index: 1;">
      <!--表格1-->
      <card v-if="activeIndex === 0">
        <!--上部选择标签-->
        <div class="row">
          <div class="col-sm-2" style="margin-left: 1rem">
<!--            <h3 class="card-title">选择试题管理</h3>-->
            <div class="btn-group btn-group-toggle"
                 :class="isRTL ? 'float-left' : 'float-right'"
                 data-toggle="buttons">
              <label v-for="(option, index) in bigLineChartCategories"
                     :key="option"
                     class="btn btn-sm btn-primary btn-simple"
                     :class="{active: activeIndex === index}"
                     @click="setActiveIndex(index)"
              >
                {{ option }}
              </label>
            </div>
          </div>
          <div class="col-sm-6">
            <!--选择标签-->
<!--            <div class="btn-group btn-group-toggle"-->
<!--                 :class="isRTL ? 'float-left' : 'float-right'"-->
<!--                 data-toggle="buttons">-->
<!--              <label v-for="(option, index) in bigLineChartCategories"-->
<!--                     :key="option"-->
<!--                     class="btn btn-sm btn-primary btn-simple"-->
<!--                     :class="{active: activeIndex === index}"-->
<!--                     @click="setActiveIndex(index)"-->
<!--                     >-->
<!--                {{ option }}-->
<!--              </label>-->
<!--            </div>-->
          </div>
        </div>
        <div class="table-responsive" style="height: 23.9rem; overflow-x: hidden;overflow-y: hidden">
          <base-table :data="paginatedData1"
                      :columns="tableColumns1">
            <template slot="columns">
              <th class="text-center">#</th>
              <th>题目类型</th>
              <th style="width: 14rem;">题目</th>
              <th>A选项</th>
              <th>B选项</th>
              <th>C选项</th>
              <th>D选项</th>
              <th>正确答案</th>
              <th>对应课程</th>
              <th>相关知识点</th>
              <th style="width: 7rem">发展</th>
              <th class="text-right">操作</th>
            </template>
            <template slot-scope="{row}">
              <td>{{ row.id }}</td>
              <td>{{ row.type }}</td>
              <td>{{ row.topic }}</td>
              <td>{{ row.optionA }}</td>
              <td>{{ row.optionB }}</td>
              <td>{{ row.optionC }}</td>
              <td>{{ row.optionD }}</td>
              <td>{{ row.correct }}</td>
              <td>{{ row.course }}</td>
              <td>{{ row.knowledge }}</td>
<!--              <td>{{ row.development }}</td>-->
<!--              <td>-->
<!--                <template v-for="(tag, index) in row.development">-->
<!--                  <el-tag class="tag-item" :key="index" :type="getTagType(index)">{{ tag }}</el-tag>-->
<!--                </template>-->
<!--              </td>-->
              <td>
                <template v-for="(tag, index) in row.development">
                  <el-tag class="tag-item" :key="index" :type="getTagType(tag)" style="margin-right: 2px;">{{ tag }}</el-tag>
                </template>
              </td>
              <td class="td-actions text-right">
                <base-button type="info" size="sm" icon style=" margin-right: 1rem;">
                  <i class="tim-icons icon-align-center"></i>
                </base-button>
                <base-button type="danger" size="sm" icon>
                  <i class="tim-icons icon-simple-remove"></i>
                </base-button>
              </td>
            </template>
          </base-table>
        </div>

        <!--分页-->
        <div style="margin-top: -0.5rem">
          <el-pagination
            style="margin-left: 28rem;color: #2E65F5"
            v-model="currentPage1"
            :page-size="pageSize1"
            :total="tableData1.length"
            background
            @current-change="handlePageChange1"
            layout="prev, pager, next"
            class="rounded-pagination blue-pagination"
          ></el-pagination>
        </div>

      </card>

      <!--表格2-->
      <card v-else-if="activeIndex === 1">
        <!--上部选择标签-->
        <div class="row">
          <div style="margin-left: 1rem" class="col-sm-2">
<!--            <h3 class="card-title">简答试题管理</h3>-->
            <!--选择标签-->
            <div class="btn-group btn-group-toggle"
                 :class="isRTL ? 'float-left' : 'float-right'"
                 data-toggle="buttons">
              <label v-for="(option, index) in bigLineChartCategories"
                     :key="option"
                     class="btn btn-sm btn-primary btn-simple"
                     :class="{active: activeIndex === index}"
                     @click="setActiveIndex(index)">
                {{ option }}
              </label>
            </div>
          </div>
          <div class="col-sm-6">
<!--            &lt;!&ndash;选择标签&ndash;&gt;-->
<!--            <div class="btn-group btn-group-toggle"-->
<!--                 :class="isRTL ? 'float-left' : 'float-right'"-->
<!--                 data-toggle="buttons">-->
<!--              <label v-for="(option, index) in bigLineChartCategories"-->
<!--                     :key="option"-->
<!--                     class="btn btn-sm btn-primary btn-simple"-->
<!--                     :class="{active: activeIndex === index}"-->
<!--                     @click="setActiveIndex(index)">-->
<!--                {{ option }}-->
<!--              </label>-->
<!--            </div>-->
          </div>
        </div>
        <div class="table-responsive" style="height: 23.9rem; overflow-x: hidden;overflow-y: hidden">
          <base-table :data="paginatedData2"
                      :columns="tableColumns2">
            <template slot="columns">
              <th class="text-center">#</th>
              <th>题目类型</th>
              <th style="width: 24rem">题目</th>
              <th style="width: 8rem">正确答案</th>
              <th>对应课程</th>
              <th>相关知识点</th>
              <th>发展</th>
              <th class="text-right">操作</th>
            </template>
            <template slot-scope="{row}">
              <td>{{ row.id }}</td>
              <td>{{ row.type }}</td>
              <td>{{ row.topic }}</td>
              <td>{{ row.correct }}</td>
              <td>{{ row.course }}</td>
              <td>{{ row.knowledge }}</td>
<!--              <td>{{ row.development }}</td>-->
<!--              <td>-->
<!--                <template v-for="(tag, index) in row.development">-->
<!--                  <el-tag class="tag-item" :key="index" :type="getTagType(index)">{{ tag }}</el-tag>-->
<!--                </template>-->
<!--              </td>-->
<!--              <td style="text-align: center;">-->
<!--                <template v-for="(tag, index) in row.development">-->
<!--                  <el-tag class="tag-item" :key="index" :type="getTagType(tag)" style="display: inline-block; margin-bottom: 5px;">{{ tag }}</el-tag>-->
<!--                </template>-->
<!--              </td>-->
              <td>
                <template v-for="(tag, index) in row.development">
                  <el-tag class="tag-item" :key="index" :type="getTagType(tag)" style="margin-right: 4px;">{{ tag }}</el-tag>
                </template>
              </td>
              <td class="td-actions text-right">
                <base-button type="info" size="sm" icon style=" margin-right: 1rem;">
                  <i class="tim-icons icon-align-center"></i>
                </base-button>
                <base-button type="danger" size="sm" icon>
                  <i class="tim-icons icon-simple-remove"></i>
                </base-button>
              </td>
            </template>
          </base-table>
        </div>

        <!--分页-->
        <div style="margin-top: -0.5rem">
          <el-pagination
            style="margin-left: 28rem;color: #2E65F5"
            v-model="currentPage2"
            :page-size="pageSize2"
            :total="tableData2.length"
            background
            @current-change="handlePageChange2"
            layout="prev, pager, next"
            class="rounded-pagination blue-pagination"
          ></el-pagination>
        </div>

      </card>
      <!--添加按钮-->
      <div class=" offset-md-11" style="margin-left: 64rem;margin-top: -1rem">
        <base-button class="animation-on-hover" type="primary">添加</base-button>
      </div>

      <!--小机器人-->
      <float-btn></float-btn>

    </div>
  </div>

</template>


<script>
import BaseTable from "../components/BaseTable.vue";
import Card from "../components/Cards/Card.vue";
import baseButton from "../components/BaseButton.vue";
import CourseMenu from "./CourseMenu.vue";
import FloatBtn from "../components/FloatBtn.vue";

export default {
  methods: {
    setActiveIndex(index) {
      this.activeIndex = index;
    },
    handlePageChange1(newPage) {
      this.currentPage1 = newPage;
    },
    handlePageChange2(newPage) {
      this.currentPage2 = newPage;
    },
    getTagType(tag) {
      switch(tag) {
        case '认知':
          return '';
        case '发展':
          return 'success';
        case '批判':
          return 'warning';
        case '表达':
          return 'danger';
        default:
          return '';
      }
    }
  },
  components: {
    FloatBtn,
    CourseMenu,
    BaseTable,
    Card,
    baseButton
  },
  computed: {
    paginatedData1() {
      const startIndex = (this.currentPage1 - 1) * this.pageSize1;
      const endIndex = startIndex + this.pageSize1;
      return this.tableData1.slice(startIndex, endIndex);
    },
    paginatedData2() {
      const startIndex = (this.currentPage2 - 1) * this.pageSize2;
      const endIndex = startIndex + this.pageSize2;
      return this.tableData2.slice(startIndex, endIndex);
    },
  },
  props: {
    model: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      show3: false,
      isRTL: false,
      bigLineChartCategories: ['选择类型', '简答类型'],
      activeIndex: 0,
      currentPage1: 1, // 当前页码
      pageSize1: 5, // 每页显示的数据条数
      currentPage2: 1, // 当前页码
      pageSize2: 6, // 每页显示的数据条数
      tableColumns1: ["id", "type", "topic", "optionA", "optionB", "optionC", "optionD", "correct", "course", "knowledge", "development", "actions"],
      tableData1: [

          {
            "id": 1,
            "type": "单选题",
            "topic": "在Java中，哪个关键字用于定义一个方法？",
            "optionA": "A.def",
            "optionB": "B.method",
            "optionC": "C.function",
            "optionD": "D.procedure",
            "correct": "D",
            "course": "Java",
            "knowledge": "Java方法定义",
            "development": ["批判"]
          },
          {
            "id": 2,
            "type": "单选题",
            "topic": "Java中用于判断两个对象是否相等的关键字是？",
            "optionA": "A. ==",
            "optionB": "B. !=",
            "optionC": "C. equals()",
            "optionD": "D. compareTo()",
            "correct": "C",
            "course": "Java",
            "knowledge": "对象比较",
            "development": ["认知", "表达"]
          },
          {
            "id": 3,
            "type": "单选题",
            "topic": "Java中用于循环执行代码块的结构是？",
            "optionA": "A. if",
            "optionB": "B. for",
            "optionC": "C. while",
            "optionD": "D. switch",
            "correct": "B",
            "course": "Java",
            "knowledge": "Java循环结构",
            "development": ["发展"]
          },
          {
            "id": 4,
            "type": "多选题",
            "topic": "下列哪些是Java内置的数据类型？",
            "optionA": "A. ArrayList",
            "optionB": "B. HashMap",
            "optionC": "C. LinkedList",
            "optionD": "D. 自定义类",
            "correct": "ABCD",
            "course": "Java",
            "knowledge": "Java数据类型",
            "development": ["批判", "发展"]
          },
          {
            "id": 5,
            "type": "多选题",
            "topic": "以下哪些关键字用于控制Java循环结构？",
            "optionA": "A. for",
            "optionB": "B. loop",
            "optionC": "C. while",
            "optionD": "D. do",
            "correct": "AC",
            "course": "Java",
            "knowledge": "Java循环结构",
            "development": ["认知", "表达"]
          },
          {
            "id": 6,
            "type": "单选题",
            "topic": "Java中用于将浮点数转换为整数的方法是？",
            "optionA": "A. intValue()",
            "optionB": "B. floatValue()",
            "optionC": "C. parseInt()",
            "optionD": "D. toInt()",
            "correct": "A",
            "course": "Java",
            "knowledge": "类型转换",
            "development": ["发展"]
          },
          {
            "id": 7,
            "type": "多选题",
            "topic": "以下哪些方法可以用于在Java中打开和读取文件？",
            "optionA": "A. FileReader()",
            "optionB": "B. BufferedReader()",
            "optionC": "C. FileReader.read()",
            "optionD": "D. BufferedWriter()",
            "correct": "AB",
            "course": "Java",
            "knowledge": "Java文件操作",
            "development": ["表达"]
          }

      ],
      tableData2: [

          {
            "id": 1,
            "type": "填空题",
            "topic": "在Java中，用于将字符串转换为小写的方法是________。",
            "correct": "toLowerCase()",
            "course": "Java",
            "knowledge": "Java字符串操作",
            "development": ["认知", "发展", "表达"]
          },
          {
            "id": 2,
            "type": "填空题",
            "topic": "Java中用于判断两个对象是否相等的关键字是________。",
            "correct": "equals()",
            "course": "Java",
            "knowledge": "Java对象比较",
            "development": ["表达"]
          },
          {
            "id": 3,
            "type": "填空题",
            "topic": "在Java中，用于获取数组的长度的方法是________。",
            "correct": "length",
            "course": "Java",
            "knowledge": "Java数组操作",
            "development": ["认知", "批判"]
          },
          {
            "id": 4,
            "type": "填空题",
            "topic": "Java中用于将字符串转换为大写的方法是________。",
            "correct": "toUpperCase()",
            "course": "Java",
            "knowledge": "Java字符串操作",
            "development": ["表达"]
          },
          {
            "id": 5,
            "type": "填空题",
            "topic": "在Java中，用于向ArrayList末尾添加元素的方法是________。",
            "correct": "add()",
            "course": "Java",
            "knowledge": "Java集合操作",
            "development": ["认知", "批判", "发展"]
          },
          {
            "id": 6,
            "type": "填空题",
            "topic": "Java中用于删除ArrayList中指定位置元素的方法是________。",
            "correct": "remove()",
            "course": "Java",
            "knowledge": "Java集合操作",
            "development": ["批判", "发展"]
          },
          {
            "id": 7,
            "type": "填空题",
            "topic": "在Java中，用于连接两个字符串的类是________。",
            "correct": "StringBuffer",
            "course": "Java",
            "knowledge": "Java字符串操作",
            "development": ["认知"]
          }

      ]
    }
  }
}
</script>

<style scoped>
.card-title {
  margin-bottom: 0.2rem !important;
  font-weight: 400 !important;
}
label.btn.btn-sm.btn-primary.btn-simple {
  height: 1.8rem;
  font-size: 14px;
}

</style>
